<template>
  <div class="boy">
    <h3>男人组件</h3>
    <div>金钱：{{ moneyAll }}</div>
    <div>私房钱：{{ money }}</div>
    <button @click="addFn">搬砖+1</button>
    <button @click="sellFn(100)">卖肾+100</button>
    <button @click="extra">外快 +200</button>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      money: 100,
    };
  },
  methods: {
    //辅助函数： mapMutations([])
    //直接将mutatio中的方法导入methods中，并且可以直接调用mutations中的方法，简化了代码量
    ...mapMutations(["addFn", "sellFn", "extraFn"]),

    // add() {
    //   //子组件不能直接修改vuex仓库中 的数据，必须通过mutations修改数据
    //   //this.$store.state.money++;
    //   this.$store.commit("addFn");
    // },
    // sell() {
    //   this.$store.commit("sellFn", 100);
    // },
    extra() {
      //传对个参数
      this.$store.commit("extraFn", {
        more: 200,
        car: "梅赛德斯",
      });
    },
  },
  computed: {
    // money() {
    //   return this.$store.state.money;
    // },
    //mapState的参数可以是对象，可以用来给属性重命名
    // ...mapState(["money"]),
    ...mapState({
      moneyAll: "money",
    }),
  },
};
</script>

<style>
button {
  padding: 5px;
  line-height: 30px;
  margin-left: 10px;
}
</style>
